<template>
  <div class="app-container">
    <!-- 废物利用 -->
    <el-row>
      <UsualiyTable
        :formOption="formOption"
        :searchBtn="searchBtn"
        :btnhasPermi.sync="btnhasPermi"
        :dataSource.sync="dataList"
        :columns.sync="columns"
        @change="tableChange"
        @hander="hander"
        :loading.sync="loading"
        :params="queryParams"
        @handleExport="handleExport"
        @getList="getList"
        :total.sync="total"
        :pagination="true"
        :allChange="1"
        :multipleArr.sync="multipleArr"
        @deleteFunc="deleteFunc"
      />
    </el-row>
    <!-- 查看附件 -->
    <!-- <OpenImages ref="OpenImagesDialog" /> -->
    <!-- 新增 -->
    <!-- <addCompon ref="addDialog" @ok="getList(1)" /> -->
  </div>
</template>
<script>
// import OpenImages from '@/views/openImages'
// import addCompon from './add.vue'
// import { checkPermi } from '@/utils/permission'
import UsualiyTable from "@/components/table/commonTable";
import { getNoCompleteTask } from "@/api/purchase";
export default {
  components: {
    // OpenImages,
    // addCompon,
    UsualiyTable,
  },
  data() {
    return {
      // 表格刷选
      formOption: [
        // {
        //   type: "select",
        //   prop: "approveStatus",
        //   label: "审批状态",
        //   key: "approveStatus",
        //   selectOptions: [
        //     {
        //       value: "固体",
        //       label: "固体",
        //     },
        //     {
        //       value: "液体",
        //       label: "液体",
        //     },
        //   ],
        // },
        {
          type: "input",
          prop: "recycLingUseMethod",
          label: "姓名",
          key: "recycLingUseMethod",
          width: 120,
        },
      ],
      exportLoading: false, // 导出加载
      loading: false, // 表格加载
      // 按钮
      searchBtn: ["search", "export"], //'add',
      btnhasPermi: [
        "sewagehandle:sewagehandle:list",
        "sewagehandle:sewagehandle:add",
        "sewagehandle:sewagehandle:export",
      ],
      dataList: [], // 表格数据分页的
      isEdit: false, // 是否有修改权限
      isDelete: false, // 是否有删除权限
      approveStatusStr: false, //流程状态
      multipleArr: [], // 表格选中的数据，准备进行批量操作
      columns: [
        {
          title: "序号",
          dataIndex: "index",
          key: "index",
          width: "100",
          align: "center",
          label: "Operation:Delete:Hint", //可以做多语言的_this.$STR('', '序列')
          render: (value, item, index) => {
            return (
              index +
              1 +
              (this.queryParams.pageNum - 1) * this.queryParams.pageSize
            );
          },
        },
        {
          title: "审批状态",
          dataIndex: "approveStatusStr",
          key: "approveStatusStr",
        },
        {
          title: "员工工号",
          dataIndex: "applyUser",
          key: "applyUser",
        },
        {
          title: "员工姓名",
          dataIndex: "createBy",
          key: "createBy",
        },
        {
          title: "部门",
          dataIndex: "deptName",
          key: "deptName",
        },
        {
          title: "订单",
          dataIndex: "orderName",
          key: "orderName",
        },
        {
          title: "总价",
          dataIndex: "totalPrice",
          key: "totalPrice",
        },
        {
          title: "流程状态",
          dataIndex: "approveStatus",
          width: "200px",
          key: "approveStatus",
          render: (value, row, index) => {
            return (
              <div>
                {this.isEdit ? (
                  <el-steps align-center style="width:180px">
                    <el-step title="审批人" description="已通过"></el-step>
                    <el-step title="审批人" description="已通过"></el-step>
                    <el-step title="审批人" description="已通过"></el-step>
                  </el-steps>
                ) : (
                  ""
                )}
              </div>
            );
          },
        },
      ], // 表格表头
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        approveStatus: undefined,
      },
      total: 0, // 分页总条数
    };
  },
  mounted() {
    // checkPermi(['sewagehandle:sewagehandle:remove'])
    this.isEdit = true;
    this.isDelete = true;
    this.getList(1);
  },
  methods: {
    /**
     * 批量删除操作
     */
    deleteFunc(arr) {
      if (this.multipleArr.length === 0) {
        this.multipleArr = arr;
      } else {
        this.multipleArr = this.multipleArr.concat(arr);
      }
      console.log("批量选中", arr);
    },
    /**
     * openImages查看附件事件
     */
    // openImages(row) {
    //   this.$nextTick(() => {
    //     this.$refs.OpenImagesDialog.init(row)
    //   })
    // },
    /** 新增按钮操作 */
    handleAdd() {
      this.$nextTick(() => {
        this.$refs.addDialog.init({});
      });
    },
    /**
     * 修改
     */
    handleUpdate(row) {
      this.$nextTick(() => {
        this.$refs.addDialog.init(row);
      });
    },
    // 获取列表数据
    getList(index) {
      this.loading = true;
      if (index === 1) {
        this.queryParams.pageNum = 1;
      }
      getNoCompleteTask(this.queryParams).then((response) => {
        this.dataList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 分页插件
    tableChange(obj, multipleSelection) {
      this.queryParams.pageNum = obj.pageNum;
      this.queryParams.pageSize = obj.pageSize;
      this.multipleArr = multipleSelection;
      this.getList();
    },
    // 新增与修改
    hander(item, name) {
      // console.log('objaddd', item, name)
      let _this = this;
      let form = Object.assign({}, item);
      this.$nextTick(() => {
        _this.$refs[name].init(form);
      });
    },
    /**
     * 导出
     */
    handleExport(arrObj) {
      let _this = this;
      this.exportLoading = true;
      let obj = {
        pageNum: arrObj.pageNum,
        pageSize: arrObj.pageSize,
        approveStatus: arrObj.approveStatus,
      };
      // getSewageHandleExport({ ...obj }).then((res) => {
      //   var blob = new Blob([res]);
      //   var link = document.createElement('a');
      //   link.download = '粪污资源利用管理.xlsx';
      //   link.href = URL.createObjectURL(blob);
      //   link.click();
      //   _this.exportLoading = false
      // }).catch((err) => {
      //   // console.log(err);
      // })
    },
    /**
     * 删除
     */
    handleDelete(row) {
      let _this = this;
      this.$confirm('是否删除"' + row.approveStatus + '"?', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return _this.delUser(row.sewageHandleId);
        })
        .then(() => {
          this.getList();
          // this.msgSuccess("删除成功");
        });
    },
    delUser(sewageHandleId) {
      let _this = this;
      // getSewageHandleDelete(sewageHandleId).then(function (res) {
      //   if (res.code === 200) {
      //     _this.msgSuccess("删除成功");
      //     _this.getList()
      //   } else {
      //     _this.msgError(res.msg)
      //   }
      // })
    },
  },
};
</script>